import Vue from 'vue'
import Component from 'vue-class-component'
import '../assets/css/filterStyle.css'
import {Watch} from 'decorators'

@Component({
  props: {
    items: Array,
    itemsDefault: Array
  }
})

export default class ConditionListClass extends Vue {
  lists = Array
  wrapperHeight = 0
  // selectArr = []

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 56
    // this.lists = this.items
  }

  @Watch('items', {immediate: true, deep: true})
  onItemsChange (items) {
    if (items && items.length > 0) {
      this.lists = items
      // this.selecteItem()
    }
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  // 取出被选中的
  selecteItem() {
    // const superID = this.$store.state.photoStore.currentSuperId
    // this.$store.dispatch('getSelectBySuperId', superID)
    // this.selectArr = this.$store.state.photoStore.currentSelects
  }

  // 选择条件
  handlerClickCell(index) {
    let item = this.lists[index]
    item.checked = !item.checked
    this.$emit('selected', item)
  }

  contains(arr, obj) {
    if (!arr) {
      return
    }
    for (var i = 0; i < arr.length; i++) {
      let model = arr[i]
      if (model === obj) {
        return true
      }
    }
    return false
  }

  checkSubSelectItem (value) {
    if (!value.children) { return }
    let valueString = ''
    for (let i in value.children) {
      let item = value.children[i]
      if (item.checked) {
        valueString = valueString + 'item.name'
      }
    }
    return valueString
  }

  // 生成选项
  createItems() {
    console.log(this.lists)
    if (this.lists && this.lists.length <= 0) {
      return
    }
    const item = this.lists.map((value, index) => {
      return <div onClick={ () => this.handlerClickCell(index)}>
              {value.children ? <mt-cell title={value.name} value={this.checkSubSelectItem(value)} is-link></mt-cell>
               : <mt-cell title={value.name} >
                <icon v-show={!value.checked} name='sortUnSelect' scale = '2'/>
                <icon v-show={value.checked} name='sortSelect' scale = '2'/>
                </mt-cell>}
             </div>
    })
    return item
  }

   // 取消
  handlerCancel () {
    this.$emit('clearItem', this.lists)
  }

  // 确定
  handlerSure () {
    this.$emit('sure')
  }

  render () {
    return (
      <div class = "content">
        <div class="pageScroll" ref="wrapper" style={this.caculateHeight + ';padding-top:44px;bottom:44px'} infinite-scroll-disabled={true}
             infinite-scroll-distance="0">
          <div>
            {this.createItems()}
          </div>
        </div>
        <div class = 'shareFilterStyleClass'>
            <div onClick={this.handlerCancel}>清除</div>
            <div onClick={this.handlerSure}>筛选</div>
        </div>
      </div>
    )
  }
}
